page {
  background-color: #23262D;
}

.before {
  .before-img {
    display: flex;
    width: 20rpx;
    margin-left: 30rpx;

    image {
      margin: auto;
      width: 40rpx;
      height: 14rpx;
      transform: rotate(90deg);
    }
  }
}

.login {
  width: 100%;

  .trademark-icon {
    width: 100%;
    height: 406rpx;
    display: flex;
    padding-top: 160rpx;
    padding-bottom: 68rpx;
    box-sizing: border-box;

    .trademark {
      width: 198rpx;
      height: 178rpx;
      margin: auto;
    }
  }

  .input-group {
    width: 100%;

    .input {
      margin-left: 124rpx;
      margin-bottom: 44rpx;
      width: 508rpx;
      height: 80rpx;
      display: flex;
      background-color: #33363D;
      border-radius: 26rpx;

      .input-icon {
        margin-left: 52rpx;
        margin-right: 16rpx;
        margin-top: 21rpx;
        width: 28rpx;
        height: 38rpx;
      }

      .input-box {
        input {
          height: 80rpx;
        }
      }
    }

    .i-login {
      margin-top: 110rpx;
      font-family: PingFangSC-Regular;
      font-size: 40rpx;
      color: #FFFFFF;
      text-align: center;
      width: 508rpx;
      height: 80rpx;
      margin-left: 124rpx;
      margin-bottom: 44rpx;
      border-radius: 26rpx;
      background-image: linear-gradient(150deg, #F25B86 0%, #F1AC5E 100%);
      box-shadow: 0 8px 28px 0 rgba(0, 0, 0, 0.57);
    }

    .wx-login {
      margin-top: 0;
      background-image: linear-gradient(150deg, #07b933 0%, #046313 100%);
    }

    .more {
      margin-left: 124rpx;
      margin-top: -20rpx;
      width: 508rpx;
      display: flex;
      justify-content: space-between;

      .more-item {
        opacity: 0.59;
        font-family: PingFangSC-Regular;
        font-size: 28rpx;
        color: #FFFFFF;
      }
    }
  }
}